
<!-- 星火生成 -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>拍照示例</title>
  </head>

  <body>
    <video id="video" width="640" height="480" autoplay></video>
    <button id="snap">拍照</button>
    <canvas id="canvas" width="640" height="480"></canvas>

    <script>
      const video = document.getElementById("video");
      const canvas = document.getElementById("canvas");
      const context = canvas.getContext("2d");
      const snapButton = document.getElementById("snap");

      if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices
          .getUserMedia({ video: true })
          .then((stream) => {
            video.srcObject = stream;
            video.play();
          })
          .catch((error) => {
            console.error("Error accessing camera:", error);
          });
      } else {
        console.error("Camera not supported");
      }

      snapButton.addEventListener("click", () => {
        context.drawImage(video, 0, 0, 640, 480);
      });
    </script>
  </body>
</html>